<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      @onCreated="handleCreated"
      @onDestroyed="handleDestroyed"
    />
  </div>
  <div @click="savrHtmlText">testsss</div>
</template>
<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { ref, shallowRef, watch } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef();
const toolbarConfig = ref({});
const valueHtml = ref("");
const editorConfig = ref({ placeholder: "请输入内容..." });
const handleCreated = (editor: any) => {
  /** 编辑起初始化 */
  editorRef.value = editor;
};
const handleDestroyed = (editor: any) => {
  /**编辑器销毁 */
};
const savrHtmlText = () => {
  console.log(valueHtml.value);
};
</script>